<template>
    <div>
        <div class="top">
            <div @click="tocart">&lt;</div>
            <div>地址管理</div>
        </div>
        <div class="addrlist">
            <van-address-list
            :list="addresses"
            default-tag-text="默认"
            :switchable="false"
            @add="onAdd"
            @edit="onEdit"
            >
                <!-- 这里的item代表当前这一个地址的完整内容 -->
                <template #item-bottom="item">
                    <van-button class="removeAddr" icon="delete-o" 
                    type="default" @click="removeAddr(item.id)">
                    </van-button>
                </template>
            </van-address-list>
        </div>
        <van-dialog v-model="show" :title="title"  :show-confirm-button="false" 
        :close-on-click-overlay="true"
        :show-cancel-button="false">
            <van-address-edit
            :area-list="areaList"
            :address-info="AddressInfo"
            show-postal
            show-set-default
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            />
        </van-dialog>
    </div>
</template>

<script>
import Vue from 'vue';
import { AddressList } from 'vant';
import { Dialog } from 'vant';
import { AddressEdit } from 'vant';
import { areaList } from '@vant/area-data';
import {saveAddr, getAddrs, delAddr} from '@/request'
import {Toast} from 'vant'
import {getCookie} from '@/utils/cookie'
import { Button } from 'vant';

Vue.use(Button);
Vue.use(Toast);
Vue.use(AddressEdit);
// 全局注册
Vue.use(Dialog);
Vue.use(AddressList);
export default {
    data () {
        return {
            addresses: [],
            show: false,
            areaList: areaList,
            AddressInfo: {},
            title: '添加地址'
        }
    },
    created() {
        this.getAddresses()
    },
    methods: {
        getAddresses() {
            getAddrs().then(data => {
                this.addresses = data.data.map(item => {
                    item.address = item.province + item.city + item.county + item.addressDetail
                    return item
                })
            })
        },
        onAdd() {
            // 让弹窗显示
            this.show = true
            // 更换标题
            this.title = '地址添加'
        },
        onEdit(item) { 
            // 这里的item表示我们要修改的这个地址的完整数据
            // 更换标题
            this.title = '地址编辑'
            // 让弹窗显示
            this.show = true
            // console.log(item);
            this.AddressInfo = item
        },
        // 点击地址保存按钮后会执行的函数
        onSave(content) { 
            // 这里的content参数，就是在表单中输入的数据 
            // 将当前用户名保存在数据中
            var username = getCookie('username')
            content.username = username
            saveAddr(content).then(data => {
                // 给用户提示
                Toast.success(data.msg)
                // 让弹窗隐藏
                this.show = false
                // 清空数据
                this.AddressInfo = {}
                // 重新获取地址显示
                this.getAddresses()
            })
        },
        tocart(){
            this.$router.push('/cart')
        },
        removeAddr(id) {
            // 询问用户是否真的要删除
            Dialog.confirm({
                title: '删除地址',
                message: '你确认要删除吗？',
            })
            .then(() => {
                // 发起删除请求
                delAddr(id).then(data => {
                    if(data.code === 1) {
                        var _this = this
                        Toast.success({
                            message: data.msg,
                            onClose() {
                                _this.getAddresses()
                            }
                        })
                    }
                })
            })
            .catch(() => {
                Toast.success('已取消')
            });
        }
    }
}
</script>

<style scoped>
    .van-address-item{
        position: relative;
    }
    .van-button.removeAddr{
        border: hidden;
        position: absolute;
        right: 60px;
        top: 50%;
        transform: translateY(-50%)
    }
    .top{
        color: white;
        padding: 10px 20px;
        border-bottom: 2px solid #ccc;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-family: '微软雅黑','Courier New', Courier, monospace;
        font-size: 20px;
        font-weight: bold;
        background-color: #FF0000;
    }
    .top>div:first-child{
        margin-right: 20px;
    }
    .top>div:last-child{
        flex: 1;
        text-align: center;
    }
</style>
